<!--
 * @Author: tian_biao
 * @Date: 2021-08-12 14:00:37
 * @LastEditTime: 2021-08-26 14:55:33
 * @Description: 特殊巡视列表
-->
<template>
    <div id="defectLib">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title" :headerStyle="{color:'#333',backGroundColor: '#fff'}" :textStyle="{color:'#333'}"
                :titleStyle="{color:'#333'}">
                <template slot="header_arrow">
                    <van-icon size="17" name="arrow-left" @click="back" />
                </template>
                <template slot="header_icon">
                    <van-image width="1rem" height="1rem" :src="icon.rfid" @click="finishFileList" />
                    <van-image width="1rem" height="1rem" :src="icon.scan" @click="tourStatistics" />
                </template>
            </Theader>
        </div>

        <div class="tabs">
            <van-tabs v-model="active" title-active-color="#0EB295" color="#0EB295" line-width="2.8rem">
                <van-tab @click="tabClick('1')" :title="'待安排'">
                    <!-- 任务列表 -->
                    <div class="listPart">
                        <van-row class="bg_4dbfae header search_header" type="flex" justify='space-around'>
                            <van-col span="21">
                                <van-search style="position: unset" maxlength="20" v-model.trim="keyWord" show-action
                                    @search="search" shape="round" background="#F5F6FA" placeholder="请输入变电站名称">
                                </van-search>
                            </van-col>
                            <van-col span="3">
                                <img class="sizer" @click="show=true" src="../../images/sreachG.png">
                            </van-col>
                        </van-row>
                        <div class="itemList">
                            <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
                                @load="getDefectDicInfo">
                                <div class="defectItem">
                                    <div class="rightPart">
                                        <div class="timePart">
                                            <div class="fristBox">
                                                <div>
                                                    <div class="defectXz textColorYb">「待安排」</div>
                                                    <div class="title">花园山变电站熄灯巡视</div>
                                                </div>
                                            </div>
                                            <div class="fristBox">
                                                <div>
                                                    <div>交花园山变电 交流110kv</div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                                                <div class="ml05rem">巡视人：</div>
                                                <div class="textShow">宋云飞</div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                                                <div class="tourTime ml05rem">巡视计划时间：</div>
                                                <div class="textShow">2021/06/09 09:21</div>
                                            </div>
                                            <div class="schduling" @click="order('计划安排')">计划安排</div>
                                            <!-- <img class="schduling" @click="order('计划安排')" src="../../images/jhap.png"> -->
                                        </div>
                                    </div>
                                    <!-- <div class="xdxs">熄灯巡视</div> -->
                                </div>
                            </van-list>
                        </div>
                    </div>
                </van-tab>
                <van-tab @click="tabClick('2')" :title="'待处理'">
                    <!-- 任务列表 -->
                    <div class="listPart">
                        <div class="message" v-if="messageShow">
                            <div class="messageBox">
                                <div class="messageText">您当前有7个巡视任务待处理，请及时关注！</div>
                                <van-icon name="cross" @click="messageShow=false" />
                            </div>
                        </div>
                        <van-row class="bg_4dbfae header search_header mt1rem" type="flex" justify='space-around'>
                            <van-col span="21">
                                <van-search style="position: unset" maxlength="20" v-model.trim="keyWord" show-action
                                    @search="search" shape="round" background="#F5F6FA" placeholder="请输入变电站名称">
                                </van-search>
                            </van-col>
                            <van-col span="3">
                                <img class="sizer" @click="show=true" src="../../images/sreachG.png">
                            </van-col>
                        </van-row>
                        <div class="itemList">
                            <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
                                @load="getDefectDicInfo">
                                <div class="defectItem">
                                    <div class="rightPart">
                                        <div class="timePart">
                                            <div class="fristBox">
                                                <div>
                                                    <div class="defectXz textColorYb">「待准备」</div>
                                                    <div class="title">花园山变电站熄灯巡视</div>
                                                </div>
                                            </div>
                                            <div class="fristBox">
                                                <div>
                                                    <div>交花园山变电 交流110kv</div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                                                <div class="ml05rem">巡视人：</div>
                                                <div class="textShow">宋云飞</div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                                                <div class="tourTime ml05rem">巡视计划时间：</div>
                                                <div class="textShow">2021/06/09 09:21</div>
                                            </div>
                                            <div class="btnLeft1" @click="gostartReady">追回</div>
                                        </div>
                                    </div>
                                    <!-- <div class="xdxs">熄灯巡视</div> -->
                                </div>
                                <div class="defectItem" @click="gostartReady">
                                    <div class="rightPart">
                                        <div class="timePart">
                                            <div class="fristBox">
                                                <div>
                                                    <div class="defectXz textColorYb">「待准备」</div>
                                                    <div class="title">花园山变电站熄灯巡视</div>
                                                </div>
                                            </div>
                                            <div class="fristBox">
                                                <div>
                                                    <div>交花园山变电 交流110kv</div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                                                <div class="ml05rem">巡视人：</div>
                                                <div class="textShow">宋云飞</div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                                                <div class="tourTime ml05rem">巡视计划时间：</div>
                                                <div class="textShow">2021/06/09 09:21</div>
                                            </div>
                                            <!-- <div class="btnLeft1" @click="gostartReady">追回</div> -->
                                        </div>
                                    </div>
                                    <!-- <div class="xdxs">熄灯巡视</div> -->
                                </div>
                                <div class="defectItem">
                                    <div class="rightPart">
                                        <div class="timePart">
                                            <div class="fristBox">
                                                <div>
                                                    <div class="defectXz textColorYb">「待执行」</div>
                                                    <div class="title">花园山变电站熄灯巡视</div>
                                                </div>
                                            </div>
                                            <div class="fristBox">
                                                <div>
                                                    <div>交花园山变电 交流110kv</div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                                                <div class="ml05rem">巡视人：</div>
                                                <div class="textShow">宋云飞</div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                                                <div class="tourTime ml05rem">巡视计划时间：</div>
                                                <div class="textShow">2021/06/09 09:21</div>
                                            </div>
                                            <!-- <div class="btnLeft" @click="gostartReady">追回</div> -->
                                        </div>
                                    </div>
                                    <!-- <div class="xdxs">熄灯巡视</div> -->
                                </div>
                            </van-list>
                        </div>
                    </div>
                </van-tab>
                <van-tab @click="tabClick('2')" :title="'待接单'">

                    <!-- 任务列表 -->
                    <div class="listPart">

                        <van-row class="bg_4dbfae header search_header" type="flex" justify='space-around'>
                            <van-col span="21">
                                <van-search style="position: unset" maxlength="20" v-model.trim="keyWord" show-action
                                    @search="search" shape="round" background="#F5F6FA" placeholder="请输入变电站名称">
                                </van-search>
                            </van-col>
                            <van-col span="3">
                                <img class="sizer" @click="show=true" src="../../images/sreachG.png">
                            </van-col>
                        </van-row>
                        <div class="itemList">
                            <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
                                @load="getDefectDicInfo">
                                <div class="defectItem">
                                    <div class="rightPart">
                                        <div class="timePart">
                                            <div class="fristBox">
                                                <div>
                                                    <div class="defectXz textColorYb">「待接单」</div>
                                                    <div class="title">花园山变电站熄灯巡视</div>
                                                </div>
                                            </div>
                                            <div class="fristBox">
                                                <div>
                                                    <div>交花园山变电 交流110kv</div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourUser" />
                                                <div class="ml05rem">巡视人：</div>
                                                <div class="textShow">宋云飞</div>
                                            </div>
                                            <div class="box">
                                                <van-image width="0.8rem" height="0.8rem" :src="icon.tourTime" />
                                                <div class="tourTime ml05rem">巡视计划时间：</div>
                                                <div class="textShow">2021/06/09 09:21</div>
                                            </div>
                                            <!-- <img @click="order('接单')" class="schduling" src="../../images/jd.png"> -->
                                            <div @click="order('接单')" class="schduling">接单</div>
                                        </div>
                                    </div>
                                    <!-- <div class="xdxs">熄灯巡视</div> -->
                                </div>
                                <!-- 值长、班长显示界面 -->
                                <div class="defectItem">
                                    <div class="rightPart">
                                        <div class="timePart">
                                            <div class="fristBox">
                                                <div>
                                                    <!-- <div class="defectXz textColorYb">「待接单」</div> -->
                                                    <div class="title">花园山变电站熄灯巡视</div>
                                                </div>
                                            </div>
                                            <div class="fristBox">
                                                <div>
                                                    <div>交花园山变电 交流110kv</div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <van-icon name="contact" />
                                                <div>巡视人：</div>
                                                <div class="textShow">--</div>
                                            </div>
                                            <div class="box">
                                                <van-icon name="underway-o" />
                                                <div class="tourTime">巡视计划时间：</div>
                                                <div class="textShow">2021/06/13 11:30</div>
                                                <div class="dueSoon">
                                                    <div class="dueSoonText">即将到期</div>
                                                    <van-icon name="question-o" />
                                                </div>
                                            </div>
                                            <div class="itemBtnBox">
                                                <div class="btnLeft" @click="order('接单')">接单 </div>
                                                <div class="btnRight" @click="order('计划安排')">计划安排 </div>
                                            </div>
                                            <!-- <img @click="goScheduling({state:2})" class="schduling"
                                                src="../../images/jd.png"> -->
                                        </div>
                                    </div>
                                    <!-- <div class="xdxs">熄灯巡视</div> -->
                                </div>
                                <!-- 值长、班长显示界面 -->
                                <div class="defectItem">
                                    <div class="rightPart">
                                        <div class="timePart">
                                            <div class="fristBox">
                                                <div>
                                                    <!-- <div class="defectXz textColorYb">「待接单」</div> -->
                                                    <div class="title">花园山变电站熄灯巡视</div>
                                                </div>
                                            </div>
                                            <div class="fristBox">
                                                <div>
                                                    <div>交花园山变电 交流110kv</div>
                                                </div>
                                            </div>
                                            <div class="box">
                                                <van-icon name="contact" />
                                                <div>巡视人：</div>
                                                <div class="textShow">--</div>
                                            </div>
                                            <div class="box">
                                                <van-icon name="underway-o" />
                                                <div class="tourTime">巡视计划时间：</div>
                                                <div class="textShow">2021/06/13 11:30</div>
                                                <div class="dueSoon">
                                                    <div class="dueSoonText">即将到期</div>
                                                    <van-icon name="question-o" />
                                                </div>
                                            </div>
                                            <div class="itemBtnBox">
                                                <div class="btnLeft">追回</div>
                                                <div class="btnRight" @click="order('接单')">接单 </div>
                                            </div>
                                            <!-- <img @click="goScheduling({state:2})" class="schduling"
                                                src="../../images/jd.png"> -->
                                        </div>
                                    </div>
                                    <!-- <div class="xdxs">熄灯巡视</div> -->
                                </div>
                            </van-list>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>


        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'80%' }">
            <div class="sxBox">
                <!-- 标题-->
                <div class="title-bg">
                    <Theader :title="title1" :headerStyle="{color:'#333',backgroundColor: '#fff',fontWeight: '600'}"
                        :textStyle="{color:'#333'}" :titleStyle="{color:'#333'}">
                        <template slot="header_arrow">
                            <van-icon size="17" name="cross" style="font-weight: 600;margin-left: 0.5rem;" />
                        </template>
                    </Theader>
                </div>
                <div class="stateTitle">变电站</div>
                <div class="stateList">
                    <van-search style="position: unset" maxlength="20" v-model.trim="keyWordFliter" show-action
                        @search="search" shape="round" background="#F5F6FA" placeholder="请输入变电站名称">
                    </van-search>
                </div>
                <!-- <div class="stateTitle">任务类型</div>
                <div class="stateList">
                    <div class="stateitem" :class="{stateItemSelect:item.active}" v-for="(item,i) in taskTypeList"
                        :key="i" @click="selectItem('type',item)">{{item.name}}</div>
                </div> -->
                <div class="stateTitle">任务状态</div>
                <div class="stateList">
                    <div class="stateitem" :class="{stateItemSelect:item.active}" v-for="(item,i) in taskStateList"
                        :key="i" @click="selectItem('state',item)">{{item.name}}</div>
                </div>
                <div class="stateTitle">巡视时间</div>
                <div class="timeBox">
                    <div class="timeBoxSon">
                        <div>2021-12-01</div>
                        <div>至</div>
                        <div>2021-12-01</div>
                    </div>
                    <van-icon name="arrow-down" />
                </div>
                <div class="footBtn">
                    <div class="reset" @click="reset">重置</div>
                    <div class="over" @click="over">完成</div>
                </div>
            </div>
        </van-popup>
        <div class="drag" v-drag @click="createTask">+</div>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import Theader from "../component/header"
    import { getDefectDicInfo } from "../../api/defect"
    import { drag } from '../../../../utils/moveBtn'
    export default {
        name: "TcycleToueList",
        directives: {
            drag
        },
        components: {
            Theader
        },
        data() {
            return {
                title: "特殊巡视",
                active: 0,// 当前选中
                title1: "巡视筛选",
                messageShow: true,
                keyWordFliter: "",// 变电站筛选
                show: false,// 筛选框
                searchData: {
                    startTime: '',
                    endTime: '',
                },
                taskTypeList: [
                    { name: "全部", defectStatus: "0", active: true },
                    { name: "全面巡视", defectStatus: "1", active: false },
                    { name: "例行巡视", defectStatus: "2", active: false },
                    { name: "熄灯巡视", defectStatus: "3", active: false },
                ],
                taskStateList: [
                    { name: "全部", defectStatus: "0", active: true },
                    // { name: "待安排", defectStatus: "1", active: false },
                    { name: "待准备", defectStatus: "2", active: false },
                    { name: "待执行", defectStatus: "3", active: false },
                    // { name: "待归档", defectStatus: "4", active: false },
                ],
                userId: JSON.parse(localStorage.getItem('userInfo')).userId,
                defectLibList: [],// 缺陷库列表,
                defectData: {},// 缺陷库列表
                defectContent: '',// 缺陷库列表  
                keyWord: null,// 关键字查询
                loading: false,//加载状态
                finished: false,//加载完成
                total: 0,// 总条数
                pageNum: 1,// 当前页
                pageSize: 10,// 每页条数
                icon: {
                    rfid: require('../../images/formTable.png'),
                    scan: require('../../images/data.png'),
                    add: require('../../../../assets/img/mainIndex/add.png'),
                    time: require("@assets/img/mainIndex/time.png"),
                    tourUser: require('../../images/image087-tour.png'),
                    tourTime: require('../../images/image087-tourTime.png'),
                    left: require('../../images/left.png'),
                    right: require('../../images/right.png'),
                },
            }
        },
        created() { },
        mounted() { },
        methods: {

            /**
             * @description: 返回
             */
            back() {
                this.$router.go(-1)
            },

            /**
             * @description: 新建特巡任务
             * @param {*}
             * @return {*}
             */
            createTask() {
                this.$router.push({
                    name: "TcreateTask"
                })
            },

            /**
             * @description:选择任务类型或状态 
             * @param {*}
             * @return {*}
             */
            selectItem(type, item) {
                if (type == "type") {
                    this.taskTypeList.forEach(v => {
                        v.active = false
                    });
                    item.active = true
                } else {
                    this.taskStateList.forEach(v => {
                        v.active = false
                    });
                    item.active = true
                }
            },

            tourStatistics() {
                this.$router.push({
                    name: "tourStatistics"
                })
            },
            finishFileList() {
                this.$router.push({
                    name: "finishFileList"
                })
            },
            /**
             * @description: 筛选完成
             * @param {*}
             * @return {*}
             */
            over() {
                this.show = false
            },

            search() {
                this.defectLibList = []
            },

            /**
             * @description: 重置
             * @param {*}
             * @return {*}
             */
            reset() {
                this.taskTypeList.forEach(v => {
                    v.active = false
                });
                this.taskTypeList[0].active = true
                this.taskStateList.forEach(v => {
                    v.active = false
                });
                this.taskStateList[0].active = true
                this.keyWordFliter = ''
            },

            /**
             * @description: 计划安排
             * @param {*}
             * @return {*}
             */
            goScheduling(item) {
                this.$router.push({
                    name: "Tscheduling",
                    query: {
                        params: item
                    }
                })
            },
            /**
             * @description: 接单
             * @param {*}
             * @return {*}
             */
            order(title) {
                this.$router.push({
                    name: "Tscheduling",
                    query: {
                        params: title
                    }
                })
            },
            /**
             * @description: 开始准备
             * @param {*}
             * @return {*}
             */
            gostartReady(item) {
                this.$router.push({
                    name: "TstartReady",
                    query: {
                        params: item
                    }
                })
            },


            /**
              * @description: 查询缺陷库
              * @param {*}
              * @return {*}
              */
            getDefectDicInfo() {
                var self = this
                // 非法字符
                var regExp = /[@#\$%\^&\*\!\！\(\)\（\）\……\￥\&\_\-\——\=\+]+/g
                if (regExp.test(this.keyWord)) {
                    this.$toast("查询内容含非法字符")
                    return
                }
                // var params = {
                //     deviceType: this.deviceTypeId,// 设备类型id
                //     roleCode: "",
                //     userId: this.userId,// 用户id
                //     keyWord: this.keyWord,// 关键字
                //     pageSize: this.pageSize,// 页面条数
                //     pageNum: this.pageNum,// 页码
                // }
                var params = {
                    "pageNum": 1,
                    "pageSize": 10,
                    "deviceType": "0322", "roleCode": "", "userId": "915142429"
                }
                // this.$toast.loading({
                //     duration: 0,//展示时长 0不会消失
                //     message: "正在获取...",
                //     forbidClick: true,//是否禁止背景点击
                //     overlay: true//是否显示背景遮罩层
                // })
            },


        },
    }
</script>
<style scoped>
    #defectLib {
        background-color: rgba(250, 250, 250, 1);
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
    }

    .title-bg {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .van-search__content--round {
        background: white !important;
        color: #E6E6E6 !important;
    }

    .van-search {
        /* margin-top: 3rem; */
        width: 100%;
        border-radius: 4px !important;
        background-color: #fff !important;
        border: 1px solid #e5e5e5 !important;
        height: 2.5rem !important;
    }

    .tc-keyword-wrapper {
        margin: 5px 0;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .scan {
        margin: 0 10px;
    }

    .van-nav-bar /deep/ .van-nav-bar__title {
        color: #fff;
        font-size: 18px;
    }

    .van-nav-bar /deep/ .van-button {
        margin-right: 10px;
    }

    /* 任务列表 */
    .listPart {
        padding: 0 10px 10px;
        height: calc(100vh - 125px);
        width: 94vw;
        margin: 0 auto;
        margin-top: 2%;
        background: #F5F6F7 !important;
    }

    .defectItem {
        margin-bottom: 10px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        /* margin-top: 1rem; */
        border-radius: 4px;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #ccc;
        position: relative;
        overflow: hidden;

    }

    .defectItem .rightPart {
        width: 100%;
    }

    .van-search__action {
        display: none;
    }

    .van-icon-search::before {
        content: '\F0AF';
        font-size: 1.5rem;
        color: #999999;
    }


    .van-image {
        position: unset;
    }

    .listPart /deep/.van-cell {
        position: unset !important;
    }

    .listPart /deep/.van-cell__value {
        position: unset !important;
    }

    .textShow {
        width: 35%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dueSoon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dueSoonText {
        color: rgb(236, 135, 135);
        padding-right: 0.5rem;
    }

    .box {
        display: flex;
        margin-top: 0.5rem;
        align-items: center;
        color: #333;
    }

    .fristBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .fristBox>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .red {
        color: red;
    }

    .itemList {
        margin-top: 2%;
        height: calc(100vh - 13rem);
        overflow-y: auto;
    }

    .textColorYb {
        color: #0EB295;
    }

    .bt {
        color: #999999;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 11px;
        letter-spacing: 0px;
        text-align: left;
        margin-left: 0.5rem;
    }

    .defectXz {
        /* color: #0EB295; */
        font-family: Source Han Sans CN;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0px;
        text-align: right;
        margin-left: -0.5rem;
        width: 75px;
    }

    .sizer {
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 1rem;
        margin-top: 0.5rem;
    }

    .sxBox {
        width: 100%;
        height: 100%;
        background: #fff;
        position: relative;
    }

    .stateList {
        width: 95%;
        margin: 0 auto;
        margin-top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 2rem;
    }

    .stateitem {
        margin-top: 0.5rem;
        margin-left: 0.5rem;
        width: 7rem;
        height: 2rem;
        line-height: 2rem;
        border-radius: 4px;
        text-align: center;
        color: #838383;
        background: #F9F9F9;
    }

    .stateItemSelect {
        color: #0EB295;
        background: #F6F6F6;
    }

    .drag {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: #0EB295;
        font-size: 3rem;
        text-align: center;
        line-height: 3rem;
        position: absolute;
        bottom: 10%;
        right: 5%;
        color: #ffffff;
        box-shadow: 0px 0px 4px 0px #0EB295;
        z-index: 9999;
    }

    .stateTitle {
        /* font-weight: 600; */
        margin-left: 0.5rem;
    }

    .timeBox {
        width: 95%;
        height: 2.5rem;
        margin: 0 auto;
        margin-top: 0.5rem;
        background-color: #f0f0f0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .timeBoxSon {
        flex: 0.7;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .startTime {
        width: 10rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        color: #333;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #000000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .zhi {
        height: 2rem;
        line-height: 2rem;
        text-align: center;
    }

    .timeclass {
        width: 2rem;
        height: 2rem;
    }

    .title {
        font-style: 2rem;
        font-weight: 600;
        color: black;
        width: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .schduling {
        width: 100%;
        height: 3rem;
        margin: 0 auto;
        margin-top: 1rem;
        border-radius: 12px;
        background: url("../../images/btnBg.png");
        background-size: 100% 100%;
        text-align: center;
        line-height: 3rem;
        font-size: 1rem;
        color: #fff;
        font-weight: 600;
    }

    .itemBtnBox {
        width: 100%;
        height: 3rem;
        margin: 0 auto;
        margin-top: 1rem;
        border-radius: 12px;
        display: flex;
    }

    .xdxs {
        position: absolute;
        right: -12%;
        top: 6%;
        background: #DCF4F0;
        color: #5ecab9;
        width: 8rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        font-weight: 600;
        -webkit-transform: rotate(90deg);
        transform: rotate(49deg);
    }

    .btnLeft1 {
        flex: 0.4;
        background: #DCF4F0;
        /* background: url(../../images/btnBg.png); */
        background-size: 100% 100%;
        text-align: center;
        color: #5ecab9;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        font-weight: 600;
        border-radius: 12px;
        font-size: 1rem;
        position: relative;
        margin-top: 1rem;
    }

    .btnLeft {
        flex: 0.4;
        /* background: #DCF4F0; */

        background: url("../../images/leftBtn.png");
        background-size: 100% 100%;
        text-align: center;
        color: #5ecab9;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        font-weight: 600;
        border-radius: 12px;
        font-size: 1rem;
        position: relative;
    }

    .btnRight {
        flex: 0.6;
        background: url("../../images/rightBtn.png");
        background-size: 100% 100%;
        text-align: center;
        color: #fff;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        font-weight: 600;
        border-radius: 12px;
        font-size: 1rem;
        position: relative;
    }

    .footBtn {
        width: 100%;
        height: 5rem;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .footBtn>div {
        /* flex: 0.4; */
        width: 45%;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        border-radius: 4px;
        /* font-weight: 600; */
        font-size: 1rem;
    }

    .reset {
        box-shadow: 0px 0px 1px 0px #000;
    }

    .over {
        color: #FFFFFF;
        background-color: #5ecab9;
    }

    .tourTime {
        min-width: 110px;
    }

    .message {
        width: 99vw;
        height: 3rem;
        background-color: #FFEDED;
        color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: -0.7rem;
        margin-top: -1rem;
    }

    .messageBox {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mt1rem {
        margin-top: 1rem;
    }
    .ml05rem{
        margin-left: 0.5rem;
    }

    .messageText {
        font-size: 12px;
        margin-top: 0.5rem;
    }
</style>